<template>
  <van-tabbar
    :fixed="false"
    :value="activeName"
    safe-area-inset-bottom
    active-color="#4895FA"
    inactive-color="#1E1F22"
    @input="updateActiveName"
  >
    <template v-for="item in routeList">
      <van-tabbar-item :name="item.name" :key="item.name" :badge="item.badge" @click.native="clickTabItem(item.to)">
        <span class="tab-name">{{ item.name }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" alt="" />
        </template>
      </van-tabbar-item>
    </template>
  </van-tabbar>
</template>

<script>
export default {
  name: 'AppTabBar',
  props: {
    name: String,
    routeList: Array
  },
  data() {
    return {
      // 当前激活索引
      activeName: ''
    }
  },
  watch: {
    name(newValue) {
      this.activeName = newValue
    }
  },
  methods: {
    // 更新索引
    updateActiveName(value) {
      this.activeName = value
    },
    // 点击Tab子项
    clickTabItem(to) {
      this.$router.push(to)
    }
  },
  created() {
    // 存储首次的索引记录
    this.activeName = this.name
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .van-tabbar-item {
    height: 50px;
  }
}
</style>
